<template>
    <div>
        <!-- 轮播图 -->
        <div class="swiper">
            <el-carousel height="500px">
                <el-carousel-item v-for="(item, index) in swiper" :key="index">
                    <img
                        :src="'http://47.115.85.237:3000/' + item.imgPath"
                        alt=""
                    />
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 热门商品 -->
        <div class="hot">
            <div class="left">
                <img src="../../assets/1.png" alt="" />
            </div>
            <div class="right">
                <el-row :gutter="10">
                    <el-col :span="5" v-for="(item, index) in hot" :key="index">
                        <div class="grid-content">
                            <el-image
                                lazy-load
                                :src="
                                    'http://47.115.85.237:3000/' +
                                    item.product_picture
                                "
                            />
                            <p>{{ item.product_name }}</p>
                            <p>{{ item.product_title }}</p>
                            <p>
                                <span>￥{{ item.product_price }}</span>
                                <s>￥{{ item.product_selling_price }}</s>
                            </p>
                              <p>
                                <el-button
                                    class="w1"
                                    type="warning"
                                    plain
                                    @click="add(item)"
                                    >添加收藏</el-button
                                >
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="con">
                            <p>浏览更多 > > ></p>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { getSwiper, getHot } from "../../untils/api/index";
export default {
    data() {
        return {
            swiper: [],
            hot: [],
        };
    },
    created() {
        // 轮播图
        getSwiper().then((res) => {
            this.swiper = res.data.carousel;
        });
        // 热门商品数据
        getHot().then((res) => {
            this.hot = res.data.Product;
        });
    },
    methods: {
             // 添加购物车
        add(item) {
            if (localStorage.getItem("token")) {
                this.$store.commit("add", item);
                // commit 调用方法 向state中的shoplist传递参数item
            }else{
                Toast('你还未登录 不能添加商品 请先登录！')
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.hot {
    width: 1400px;
    margin: 20px auto;
    height: 745px;
    background-color: rgb(247, 244, 244);
    display: flex;
    .left {
        width: 350px;
        height: 100%;
        background-color: #fff;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .right {
        width: 1100px;
        margin-right: 10px;
        .con {
            width: 256px;
            height: 365px;
            box-sizing: border-box;
            padding: 170px 50px;
        }
        .el-col:hover {
            transition: all 1s;
            box-shadow: 5px 5px 5px #888888;
            transform: scale(1.02);
        }
        .el-col {
            background-color: #fff;
            height: 365px;
            width: 256px;
            margin-bottom: 10px;
            margin-left: 10px;

            .el-image {
                width: 100%;
            }
            p {
                font-size: 14px;
                margin: 0;
                padding: 5px;
            }
            :nth-child(3) {
                color: gray;
            }
            :nth-child(4) {
                span {
                    font-size: 16px;
                    color: orange;
                }
                s {
                    color: gray;
                }
            }
        }
    }
}
/deep/.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}
/deep/.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
img {
    width: 100%;
    height: 100%;
}
.w1{
    float: right;
    margin-right:10px;
    margin-top: -36px;
}
</style>